<template>
  <div class="home">
    <v-header></v-header>
    <v-sidebar></v-sidebar>
    <div class="content-box" >
            <!-- <v-component></v-component> -->
            <div class="content">
              <v-component></v-component>
              <!-- 切换组件不换页面  Component路由中的组件切换方法
              v-slot作用域插槽，Component是对应路由的属性名字
              -->
                <router-view v-slot="{ Component }">
                  <component :is="Component" />
                </router-view>
            </div>
        </div>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import vHeader from '@/components/Header.vue';
import vSidebar from '@/components/Sidebar.vue';
import vComponent from '@/components/component.vue';
@Options({
  components: {
    vHeader,
    vSidebar,
    vComponent
  },
  computed: {

    }
})
 
export default class Home extends Vue {}
</script>

<style lang="less" scoped>
.content-box{
  left: 220px;
  background-color: #f0f2f5;
}
</style>